<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxm">
    <script src="../jQuery/jquery-3.1.1.js"></script>
    <title>下拉菜单</title>
    <style>
         body{
            margin: 0;
        }
         main{
             width: 600px;
             height: 300px;
             margin: 100px auto;
             border: 1px solid #eee;
             position: relative;             
         }       
         nav{
             width: 100%;
             height: 50px;
             background-color: #999;
             display: flex;
             justify-content: space-between;
             color: #fff;
         }   
         span{
             width: calc(100% / 4);
             height: 100%;
             text-align: center;
             line-height: 50px;
         }
         span:hover{
             text-shadow: 0 0 5px orange;
             color: orange;
         }
         ul{
             width: 120px;
             height: 180px;
             padding: 0;
             margin: 0;
             list-style: none;  
             border: 1px solid #eee;   
            visibility: hidden;
             /*position: absolute;
             top: 50px;
             left: 15px;*/
             color: #999;             
         }
         div{
             display: flex;
             justify-content: space-around;
         }
         li{
             text-align: center;
             margin-top: 20px;
         }
         a{
             color: #999;          
             text-decoration: none;   
         }
         a:hover{
             text-decoration: underline;
         }
        </style>
</head>

<body>
    <main>
        <nav>
            <span class="1">公司简介</span>
            <span class="2">产品介绍</span>
            <span class="3">练习我们</span>
            <span class="4">人才招聘</span>
        </nav>
        <div>
            <ul id="u1">
                <li><a href="">概况介绍</a></li>
                <li><a href="">发展历史</a></li>
                <li><a href="">公司实力</a></li>
            </ul>
            <ul id="u2">
                <li><a href="">软件开发</a></li>
                <li><a href="">软件教育</a></li>
                <li><a href="">天使投资</a></li>
            </ul>
            <ul id="u3">
                <li><a href="">公司地址</a></li>
                <li><a href="">联系方式</a></li>
                <li><a href="">投资加盟</a></li>
            </ul>
            <ul id="u4">
                <li><a href="">iOS招聘</a></li>
                <li><a href="">HTML5招聘</a></li>
                <li><a href="">PHP招聘</a></li>
            </ul>
        </div>
    </main>
</body>

</html>

<script>
    
    // $('span').eq(0).hover(function(){
    //     $('#u1').css('display','block');
    //     $('span').eq(0).css('color','orange');
    // },function(){
    //     $('#u1').css('display','none');
    //     $('span').eq(0).css('color','#fff');
    // })
    // $('span').eq(1).hover(function(){$('#u2').css('display','block');$('span').eq(1).css('color','orange');
    // },function(){$('#u2').css('display','none');$('span').eq(1).css('color','#fff');})
    // $('span').eq(2).hover(function(){$('#u3').css('display','block');$('span').eq(2).css('color','orange');
    // },function(){$('#u3').css('display','none');$('span').eq(2).css('color','#fff');})
    // $('span').eq(3).hover(function(){$('#u4').css('display','block');$('span').eq(3).css('color','orange');
    // },function(){$('#u4').css('display','none');$('span').eq(3).css('color','#fff');})

    $('span').mouseover(function(){
        var index=$(this).attr('class');
        $("#u"+index).css("visibility","visible").siblings().css("visibility","hidden");
        $("#u"+index).mouseleave(function(){
		   	  $("#u"+index).css("visibility","hidden");
		});

    })

    // $(".content>div").addClass("none");
	// 	$(".nav>span>a").mouseover(function() {
    //        var index=$(this).attr("class");
    //        $(".text"+index).css("visibility","visible").siblings().css("visibility","hidden");
	// 	   $(".text"+index).mouseleave(function(){
	// 	   	  $(".text"+index).css("visibility","hidden");
	// 	   });
	// 	})



</script>